<template>
  <div>
    <div v-if="dataSource.tool"
         class="tool">
      <el-button v-for="item in dataSource.tool"
                 :key="item.key"
                 class="filter-item"
                 :style="{ background: item.bgColor, borderColor: item.bgColor }"
                 :type="item.type || 'primary'"
                 @click="item.handleClick(item.name, $event)">
        {{ item.name }}
      </el-button>
    </div>
    <el-table ref="table"
              v-loading="dataSource.loading"
              class="table-Pane"
              style="font-size: 14px"
              :class="{ 'no-data': !dataSource.data || !dataSource.data.length }"
              :data="dataSource.data"
              :max-height="dataSource.maxHeight || `586`"
              :row-class-name="dataSource.tableRowClassName"
              @selection-change="dataSource.handleSelectionChange">
      <!-- 是否有多选 -->
      <el-table-column v-if="dataSource.isSelection"
                       :selectable="dataSource.selectable"
                       type="selection"
                       :width="dataSource.selectionWidth || 50"
                       align="center" />
      <!-- 是否需要序号 -->
      <el-table-column v-if="dataSource.isIndex"
                       type="index"
                       label="序号"
                       width="55"
                       align="center" />
      <template v-for="(item, index) in dataSource.cols">
        <!-- 表格的列展示 特殊情况处理 比如要输入框 显示图片 -->
        <el-table-column v-if="item.isTemplate"
                         :key="item.prop + index"
                         v-bind="item">
          <template slot-scope="scope">
            <!-- 比如要输入框 显示图片等等 自己定义 -->
            <slot :name="item.prop"
                  :scope="scope" />
          </template>
        </el-table-column>
        <!-- 需要特殊颜色显示字体-->
        <el-table-column v-if="item.isSpecial"
                         :key="item.prop + index"
                         v-bind="item"
                         align="center">
          <template slot-scope="scope">
            <span :class="item.isSpecialClass(scope.row[scope.column.property])">{{ item.isSpecial(scope.row[scope.column.property]) }}</span>
          </template>
        </el-table-column>
        <!-- 需要带图标的某列，带回调事件 :paramsData="['id', 'status']"-->
        <el-table-column v-if="item.isIcon"
                         :key="item.prop + index"
                         v-bind="item"
                         align="center">
          <template slot-scope="scope">
            <Link :row="scope.row"
                  :params-data="item.paramsData"
                  :filed-name="'contractNo'"
                  :transform="{ contractNo: scope.row.contractNo }"
                  :url="item.url"
                  :value="scope.row.contractNo" />
            <!-- 比如要输入框 显示图片等等 自己定义 -->
            <!-- <slot :name="item.prop"   {"transform":{"contractNo":"contractNo"},"filedName":"contractNo","paramsData":["id","status"],"url":"wayBillDetail"}
                  :scope="scope" /> -->
          </template>
        </el-table-column>
        <!-- 图片带tooltip -->
        <el-table-column v-if="item.isImagePopover"
                         :key="item.prop + index"
                         v-bind="item"
                         align="center">
          <template slot-scope="scope">
            <el-popover placement="right"
                        title=""
                        trigger="hover">
              <img class="image-popover"
                   :src="
                  scope.row[scope.column.property] +
                  '?x-oss-process=image/quality,q_60'
                "
                   alt="" />
              <img slot="reference"
                   class="reference-img"
                   :src="
                  scope.row[scope.column.property] +
                  '?x-oss-process=image/quality,q_10'
                "
                   alt="" />
            </el-popover>
          </template>
        </el-table-column>
        <!-- 收货 -->
        <el-table-column v-if="item.consignee"
                         :key="item.prop + index"
                         :show-overflow-tooltip="true"
                         v-bind="item">
          <template slot-scope="scope">
            <consignee-info :row="scope.row"
                            class="tooltipSty" />
          </template>
        </el-table-column>
        <!-- 发货 -->
        <el-table-column v-if="item.consignor"
                         :key="item.prop + index"
                         :show-overflow-tooltip="true"
                         v-bind="item">
          <template slot-scope="scope">
            <shipping-info :row="scope.row"
                           class="tooltipSty" />
          </template>
        </el-table-column>
        <!-- 跟踪方式 Tracking-->
        <el-table-column v-if="item.trackTypeDesc"
                         :key="item.prop + index"
                         :show-overflow-tooltip="true"
                         v-bind="item">
          <template slot-scope="scope">
            <Tracking :track-type="scope.row.trackType"
                      :device-code="scope.row.deviceCode"
                      class="tooltipSty" />
          </template>
        </el-table-column>
        <!-- 补充轨迹 -->
        <el-table-column v-if="item.trajectory"
                         :key="item.prop + index"
                         :show-overflow-tooltip="true"
                         v-bind="item">
          <template slot-scope="scope">
            <div v-if="!!scope.row.device">
              <repair-track v-if="scope.row.device.trackList"
                            :row="scope.row" />
              <span v-else>{{'--'}}</span>
            </div>
            <div v-else>{{'--'}}</div>
          </template>
        </el-table-column>
        <!-- 预警预报 -->
        <el-table-column v-if="item.trackInfo"
                         :key="item.prop + index"
                         :show-overflow-tooltip="true"
                         v-bind="item">
          <template slot-scope="scope">
            <span v-if="!item.hidden.includes(scope.row.status)">{{scope.row.trackInfo}}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- 是否提送货 -->
        <el-table-column v-if="item.isDelivery"
                         :key="item.prop + index"
                         :show-overflow-tooltip="true"
                         v-bind="item">
          <template slot-scope="scope">
            <delivery :row="scope.row" />
          </template>
        </el-table-column>
        <!-- 是否装卸货 -->
        <el-table-column v-if="item.isStevedoring"
                         :key="item.prop + index"
                         :show-overflow-tooltip="true"
                         v-bind="item">
          <template slot-scope="scope">
            <stevedoring :row="scope.row" />
          </template>
        </el-table-column>
        <!-- 大部分适用 -->
        <el-table-column v-if="
            !item.isImagePopover &&
            !item.isTemplate &&
            !item.isSpecial &&
            !item.isIcon &&
            !item.consignee &&
            !item.consignor &&
            !item.trackTypeDesc &&
            !item.trajectory && 
            !item.trackInfo && 
            !item.isDelivery && 
            !item.isStevedoring
          "
                         :key="item.prop"
                         :label="item.label"
                         :width="item.width"
                         :prop="item.prop"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- <span v-if="item.isCodeTableFormatter">{{Object.assign({ formatter: item.isCodeTableFormatter }, item)}}</span> -->
            <span>{{scope.row[item.prop] || '--'}}</span>
          </template>
        </el-table-column>
      </template>
      <!-- 操作 -->
      <el-table-column v-if="dataSource.operation.data && dataSource.operation.data.length > 0"
                       fixed="right"
                       label="操作"
                       width="130">
        <template slot-scope="scope">
          <action-pane :data="scope.row"
                       :actions="dataSource.operation.data || []"
                       @action="handleAction" />
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination v-if="dataSource.pageData.total > 0"
                     :current-page="dataSource.pageData.page"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="dataSource.pageData.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="dataSource.pageData.total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import ConsigneeInfo from "@/components/table/column/ConsigneeInfo";
import ShippingInfo from "@/components/table/column/ShippingInfo";
import Tracking from "@/components/table/column/Tracking";
import RepairTrack from "@/components/table/column/RepairTrack";
import Delivery from "@/components/table/column/Delivery";
import Stevedoring from "@/components/table/column/Stevedoring";
import Link from "@/components/table/column/LinkColumn";
import ActionPane from '@/components/nr/table/ActionPane.vue'
//  dataSource: {
//          tool:[
//            {
//              name: '新增用户', //按钮名称
//              key: 1,  // 唯一标识符
//              permission: 2010106, // 权限点   v-permission="item.permission"
//              type: '',  // 使用element自带按钮类型
//              bgColor: '#67c23a', // 自定义背景色
//              handleClick: this.handleAdd //自定义事件
//            },
//          ]
//         data: [], // 表格数据
//         cols: [], // 表格的列数据
//         handleSelectionChange:(val)=>{} //点击行选中多选返回选中数组
//         rowClick:(val) => {}    // 单行点击事件
//         isSelection: false, // 表格有多选时设置
//         isOperation: true, // 表格有操作列时设置
//         isIndex: true, // 列表序号
//         loading: true, // loading
//         pageData: {
//          total: 0, // 总条数
//          pageSize: 10, // 每页数量
//          pageNum: 1, // 页码
//          pageSize:[5,10,15,20]// 每页数量
//         }
//         operation: {
//           // 表格有操作列时设置
//           label: '操作', // 列名
//           width: '350', // 根据实际情况给宽度
//           data: [
//             {
//               label: '冻结', // 操作名称
//               permission:'' //权限点    v-permission="item.permission"
//               type: 'info', //按钮类型
//               handleRow: function(){} // 自定义事件
//             },
//           ]
//         }
//       },
export default {
  components: {
    ConsigneeInfo,
    ShippingInfo,
    Tracking,
    RepairTrack,
    Delivery,
    Stevedoring,
    Link,
    ActionPane
  },
  // 接收父组件传递过来的值
  props: {
    //  表格数据和表格部分属性的对象
    // eslint-disable-next-line vue/require-default-prop
    dataSource: {
      type: Object
    }
  },
  data () {
    return {
      // advanceVisible: false
    };
  },
  watch: {
    "dataSource.cols": {
      // 监听表格列变化
      deep: true,
      handler () {
        // 解决表格列变动的抖动问题
        this.$nextTick(this.$refs.table.doLayout);
      }
    }
  },
  methods: {
    handleAdd (name) {
      this.$emit("toolMsg", name);
    },
    handleRow (index, row, lable) {
      console.log(index, row, lable);
    },
    handleSizeChange (val) {
      this.$emit("changeSize", val);
    },
    handleCurrentChange (val) {
      this.$emit("changeNum", val);
    },
    handleAction (val) {
      this.$emit("handleAction", val);
    }
    // 点击行即可选中
    // getRowData (row) {
    //   this.$refs.table.toggleRowSelection(row)
    // }
  }
};
</script>
<style scoped lang="scss">
.page {
  margin-top: 20px;
  // /deep/.el-input__inner {
  //   height: 30px;
  // }
}

// .reference-img {
//   width: 40px;
//   height: 40px;
//   background-size: 100% 100%;
//   border-radius: 4px;
// }
// .image-popover {
//   width: 200px;
//   height: 200px;
//   background-size: 100% 100%;
// }
// .icon {
//   width: 25px;
//   font-size: 20px;
//   font-weight: bold;
// }
.tool {
  padding: 10px;
  text-align: right;
}
</style>
